<template>
  <div>
    <page-list :x-uri="uri" :x-params="xParams" :doactions="doactions" :custom-components="custom" :checkbox-item="false">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'site.template.h5.create'" size="mini" type="primary" @click="create">新建</el-button>
      </template>
    </page-list>
    <!-- 新建模板 start-->
    <created-dialog :visible.sync="createdDialogVisible" @reload="reload" />
    <!-- 新建模板 end-->
    <!-- 编辑模板 start-->
    <updated-dialog v-if="updatedDialogVisible" :visible.sync="updatedDialogVisible" :template="currentTemplate" @reload="reload" />
    <!-- 编辑模板 end-->
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import IsUsed from './components/is_used';
import CreatedDialog from './CreatedDialog'
import UpdatedDialog from './UpdatedDialog'
import Tabs from './tabs';

export default {
  name: 'H5Template',
  components: {
    PageList,
    Tabs,
    CreatedDialog,
    UpdatedDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/admin/site/template/list',
      xParams: {
        template_type: 'mobile_home'
      },
      doactions: [
        {
          title: '配置',
          meta: { permission: 'site.template.h5.config' },
          callback: this.config
        },
        {
          title: '编辑',
          meta: { permission: 'site.template.h5.edit' },
          display({ row }) {
            return !row.is_system
          },
          callback: this.edit
        },
        {
          title: '删除',
          meta: { permission: 'site.template.h5.delete' },
          display({ row }) {
            return !row.is_system
          },
          callback: this.delete
        }
      ],
      custom: {
        is_used: IsUsed
      },
      createdDialogVisible: false,
      updatedDialogVisible: false,
      currentTemplate: {}
    };
  },
  methods: {
    create: function() {
      this.createdDialogVisible = true
    },
    config({ row }) {
      this.$router.push({ path: '/site/website/h5/template/' + row.id + '/config' })
    },
    edit: function({ row }) {
      this.currentTemplate = row
      this.updatedDialogVisible = true
    },
    delete: function({ row }) {
      this.$box
          .confirm('确认删除吗')
          .then(() => {
            this.$http.delete(
                '/admin/site/template/' + row.id,
                {},
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    }
  }
}
</script>

<style scoped>

</style>
